<template>
    <div class="page-common-layout">
        <div class="page-common-content">
            <tool-bar @search="$refs.table.refresh(true)"
                @reset="() => { (this.queryParam = {}), $refs.table.refresh(true); }">
                <template slot="toolBtn" slot-scope="scope">
                    <a-button class="cu-btn-primary" icon="plus" @click="handleAdd()">新建</a-button>
                    <a-button icon="upload" type="link" @click="importReportFile">{{ $ct('Import', '导入') }}
                    </a-button>
                </template>
                <template slot="toolForm">
                    <a-form-item label="规则名称">
                        <a-input v-model="queryParam.ruleName" placeholder="规则名称" />
                    </a-form-item>
                    <a-form-item label="规则编码">
                        <a-input v-model="queryParam.ruleCode" placeholder="规则编码" />
                    </a-form-item>
                </template>
            </tool-bar>
            <DataGrid ref="table" :columns="columns" :url="url" :queryParam="queryParam" rowKey="uuid"
                :showRowSelect="false">
                <span slot="renderStatus" slot-scope="text, record, index">
                    <a-switch size="small" :checked="text.text == 'true' ? true : false"
                        @change="(e) => stateChange(e, text)" />
                </span>
                <span slot="renderAction" slot-scope="{ text, record }">
                    <a @click="() => handleEdit(record)">编辑</a>
                    <span class="action-margin"></span>
                    <a @click="() => handleSub(record)" class="action-delete">删除</a>
                    <span class="action-margin"></span>
                    <a @click="() => exportFile(record.uuid)">导出</a>
                </span>
            </DataGrid>
            <edit-form ref="createModal" :visible="visible" :loading="confirmLoading" :model="mdl" @cancel="handleCancel()"
                @ok="handleOk()" />
            <web-upload ref="webUploadModal" :visible="visibleFile" :showTipText="true" :width="450"
                url="/system/sysRule/importSysRuleJson" @cancel="() => visibleFile = false" @ok="importReportJson" />
        </div>
    </div>
</template>

<!--script-->
<script>
//数据表格组件
import {
    TreeGrid,
    DataGrid,
    ZTree,
    ExportData
} from "@/components";
//方法封装
import { dataGridMixin } from "@/mixins/dataGridMixin";
//新增编辑界面
import editForm from "./edit.vue";
//字典
import TDictSelectTag from "@/components/TopVUI/dict/TDictSelectTag";
import TMultiSelectTag from "@/components/TopVUI/dict/TMultiSelectTag";
import orgPreview from "@/components/TopVUI/custom/orgPreview.vue";
import previewImage from "@/components/TopVUI/custom/previewImage.vue";
import { baseUrl } from "@/services/baseUrl.js";
import { getToken } from "@/utils/TopVUI";

export default {
    name: "Table",
    components: {
        editForm,
        TDictSelectTag,
        TMultiSelectTag,
        TreeGrid,
        DataGrid,
        ZTree,
        ExportData,
        orgPreview,
        previewImage,
    },
    mixins: [dataGridMixin],
    filters: {},
    data() {
        return {
            columns: [
                {
                    title: "规则名称",
                    align: "center",
                    width: "auto",
                    dataIndex: "ruleName"
                },
                {
                    title: "规则编码",
                    align: "center",
                    width: "auto",
                    dataIndex: "ruleCode"
                },
                {
                    title: "规则前缀",
                    align: "center",
                    width: 150,
                    dataIndex: "rulePrefix"
                },
                // {
                //     title: "日期格式",
                //     align: "center",
                //     width: 150,
                //     dataIndex: "ruleDateFormat"
                // },
                // {
                //     title: "流水位数",
                //     align: "center",
                //     width: 100,
                //     dataIndex: "ruleDigit"
                // },
                {
                    title: "流水起始",
                    align: "center",
                    width: 180,
                    dataIndex: "ruleStartNumber"
                },
                {
                    title: "流水示例",
                    width: "auto",
                    dataIndex: "ruleExample"
                },
                {
                    title: "排序",
                    align: "center",
                    width: 50,
                    dataIndex: "ruleSort"
                },
                {
                    title: "状态",
                    dataIndex: "ruleStatus",
                    align: "center",
                    width: "auto",
                    scopedSlots: { customRender: "renderStatus" }
                },
                {
                    title: "操作",
                    dataIndex: "action",
                    align: "center",
                    width: 150,
                    scopedSlots: { customRender: "renderAction" }
                }
            ],
            visible: false,
            visibleFile: false,
            confirmLoading: false,
            mdl: null,
            token: false,
            // 查询参数
            queryParam: {},
            url: {
                getPageSet: '/system/sysRule/getPageSet',
                save: '/system/sysRule/save',
                update: '/system/sysRule/update',
                deleteBatch: '/system/sysRule/deleteBatch'
            }
        };
    },
    mounted() {
        this.token = getToken();
    },
    methods: {
        // 修改状态
        stateChange(value, record) {
            event.stopPropagation()
            let param = {
                uuid: record.record.uuid,
                ruleName: record.record.ruleName,
                ruleCode: record.record.ruleCode,
                ruleStatus: value
            }
            this.$post("/system/sysRule/update", param).then((res) => {
                if (res.statusCode === 200) {
                    this.$message.success(res.message, 1.5)
                    this.$refs.table.refresh()
                } else {
                    this.$message.warn(res.message, 1.5)
                }
            })
        },
        // 导入数据
        importReportFile() {
            this.$refs.webUploadModal.add();
            this.visibleFile = true;
        },
        importReportJson() {
            this.visibleFile = false;
            this.$refs.table.refresh();
        },
        // 导出数据
        exportFile(uuid) {
            const that = this;
            this.$confirm({
                title: that.$ct("tips", "提示"),
                content: that.$ct("AreYouSureToExport", "您确定要导出该系统规则吗?"),
                okText: that.$ct("confirm", "确定"),
                cancelText: that.$ct("cancel", "取消"),
                closable: true,
                onOk() {
                    that.$get("/system/sysRule/exportSysRuleJson?token=" + that.token + "&uuid=" + uuid).then((res) => {
                        if (res.statusCode === 200 || res.uuid != null) {
                            window.location.href = baseUrl + "/system/sysRule/exportSysRuleJson?token=" + that.token + "&uuid=" + uuid;
                            that.$message.success('导出成功!', 1.5)
                        } else {
                            that.$message.error(res.message, 1.5)
                        }
                    })
                },
                onCancel() { }
            })
        }
    }
};
</script>

<!--style-->
<style scoped lang="less">
.table {
    background-color: @base-bg-color;
    padding: 24px;
}

/deep/.ant-btn-link {
    border: none !important;
}
</style>
